<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/white/common/common.jsp" %>
<%@include file="/white/common/taglibs.jsp" %>
<html>
<head>
    <script type="text/javascript" src="bigdata/js/jquery.min.js"></script>
    <script type="text/javascript" src="bigdata/js/echart/echarts.js"></script>
    <script type="text/javascript">
        function submitForm() {
            var searchForm = document.getElementById("searchForm");
            searchForm.submit();
        }
    </script>
    <style>
        #ask-ico {
            position: relative;
            display: inline-block;
        }

        #ask-ico .ask-con {
            position: absolute;
            background: #666C6C;
            border: 1px solid #ccc;
            left: 100%;
            top: 0;
            width: 300px;
            height: 200px;
            padding: 10px;
            display: none;
            color: #fff;
            font-size: 13px;
            font-weight: bold;
            overflow: scroll;
            overflow-x: auto;
        }

        #ask-ico:hover .ask-con {
            display: block;
        }

        .margin-bottom {
            font-size: 13px;
            font-weight: bold;
        }

        .highlight {
            font-size: 13px;
            color: #5DDCE2;
            font-weight: bold;
        }
    </style>
</head>
<body>
<s:form method="post" action="nspOnofflogTaImeiMonthEntityAction!queryByPage.action" theme="simple"
        id="searchForm">
    <div id="div_title">
        <h3>
                ${classDisplayName}浏览: 月活跃用户统计
                    <a id="ask-ico"> <img
                            src="img/q.png"/>

                        <div class="ask-con">
                            <p class="margin-bottom">活跃用户</p>

                            <p>
                                <span class="highlight">30日活跃用户：</span>以自然月为统计周期，统计有使用手机或PAD登陆过号码百事通客户端的总用户数，去重；
                            </p>
                        </div>
                    </a>
        </h3>

        <div id="div_search">
            <table>
                <tr>
                    <!-- 查询条件 -->
                    <td width="80" align="right">
                        月份:
                    </td>
                    <td>
                        <s:textfield size="8" maxlength="10" id="query_monthId"
                                     name="query_monthId" label="月份"
                                     onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyyMM', minDate:'1900-01',maxDate:''})">
                        </s:textfield>
                    </td>
                    <td width="80" align="right">
                        <authz:authorize ifAnyGranted="SMOOTH_ALL">
                            <s:submit cssClass="submit_search" value="搜索"
                                      action="nspOnofflogTaImeiMonthEntityAction!queryByPage"/>
                        </authz:authorize>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--列表 开始 -->
    <table cellpadding="0" cellspacing="0" class="t_list">
        <tr>
            <!--列表头部 -->
            <th>月份</th>
            <th>渠道</th>
            <th>活跃数</th>
        </tr>
        <s:iterator value="resultList" status="sindex">
            <tr>
                <td><s:property value="MONTH_ID"/></td>
                <td><s:property value="CHANNELNO"/></td>
                <td><s:property value="UV_IMEI"/></td>
            </tr>
        </s:iterator>
    </table>
    <!--列表 结束 -->
    <!--分页 开始 -->
    <s:if test="resultList.size() > 0">
        <table border="0" cellspacing="0" cellpadding="0" class="t_bottom">
            <tr>
                <td>
                    <%@include file="/white/common/pageList.jsp" %>
                </td>
            </tr>
        </table>
    </s:if>
    <!--分页 结束 -->
</s:form>
<div id="pie" style="width:100%;height: 250px;margin: 10px"></div>
<script type="text/javascript">

    $(":submit").click(function () {
        var query_monthId = $("#query_monthId").val();
        if (query_monthId == "") {
            alert("请选择月份");
            return false;
        } else {
            $("#searchForm").submit();
        }
    });

    require.config({
        paths: {
            echarts: 'bigdata/js/echart'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/pie',
            ],
            function (ec) {
                var myPie = ec.init(document.getElementById('pie')).showLoading({effect: 'bubble'});
                myPie.hideLoading();
                var query_monthId = $("#query_monthId").val();
                if (query_monthId != "") {
                    myPie.showLoading();
                    $.ajax({
                        url: 'nspOnofflogTaImeiMonthEntityAction!getPie.action',
                        dataType: 'json',
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                        data: encodeURI(encodeURI(decodeURIComponent($('#searchForm').serialize(), true))),
                        success: function (data) {
                            if (data != null) {
                                myPie.setOption(data);
                            }
                            myPie.hideLoading();
                        }

                    });
                }

            }
    );
</script>
</body>
</html>
